<template>
  <div style="box-sizing: border-box">
    <h3>员工姓名：{{ this.$route.query.row.empName }}</h3>
    <el-calendar v-model="value">
      <template slot="dateCell" slot-scope="{ data }">
        <p>
          {{ data.day.split("-").slice(1).join("-") }}
        </p>
        <p style="color: orange">
          {{ dealMyDate(data.day) }}
        </p>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: this.$route.query.row.empMonth,
      events: [
        {
          date: this.$route.query.row.empMonth + "-" + "01",
          content: this.$route.query.row.day1,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "02",
          content: this.$route.query.row.day2,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "03",
          content: this.$route.query.row.day3,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "04",
          content: this.$route.query.row.day4,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "05",
          content: this.$route.query.row.day5,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "06",
          content: this.$route.query.row.day6,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "07",
          content: this.$route.query.row.day7,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "08",
          content: this.$route.query.row.day8,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "09",
          content: this.$route.query.row.day9,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "10",
          content: this.$route.query.row.day10,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "11",
          content: this.$route.query.row.day11,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "12",
          content: this.$route.query.row.day12,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "13",
          content: this.$route.query.row.day13,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "14",
          content: this.$route.query.row.day14,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "15",
          content: this.$route.query.row.day15,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "16",
          content: this.$route.query.row.day16,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "17",
          content: this.$route.query.row.day17,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "18",
          content: this.$route.query.row.day18,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "19",
          content: this.$route.query.row.day19,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "20",
          content: this.$route.query.row.day20,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "21",
          content: this.$route.query.row.day21,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "22",
          content: this.$route.query.row.day22,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "23",
          content: this.$route.query.row.day23,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "24",
          content: this.$route.query.row.day24,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "25",
          content: this.$route.query.row.day25,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "26",
          content: this.$route.query.row.day26,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "27",
          content: this.$route.query.row.day27,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "28",
          content: this.$route.query.row.day28,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "29",
          content: this.$route.query.row.day29,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "30",
          content: this.$route.query.row.day30,
        },
        {
          date: this.$route.query.row.empMonth + "-" + "31",
          content: this.$route.query.row.day31,
        },
      ],
    };
  },
  methods: {
    dealMyDate(v) {
      console.log(v);
      let len = this.events.length;
      let res = "";
      for (let i = 0; i < len; i++) {
        if (this.events[i].date == v) {
          res = this.events[i].content;
          break;
        }
      }
      return res;
    },
  },
  mounted() {
    console.log(this.$route.query.empName);
    console.log(this.$route.query.empIdCardNo);
    console.log(this.$route.query.empMonth);
  },
};
</script>

<style lang="less" scoped>
h3 {
  box-sizing: border-box;
  margin-top: 30px;
  text-align: center;
}
.el-calendar {
  margin-top: 25px;
  margin-left: 325px;
  width: 60%;
}
.calendar-day {
  text-align: center;
  color: #202535;
  line-height: 30px;
  font-size: 12px;
}
.is-selected {
  color: #f8a535;
  font-size: 10px;
  margin-top: 5px;
}
#calendar
  .el-button-group
  > .el-button:not(:first-child):not(:last-child):after {
  content: "当月";
}
</style>
